<template>
  <uni-easyinput
    class="text-lg"
    :type="inputComponentAttrType"
    v-model="tableRowData[componentMeta.key]"
    :inputBorder="componentMeta?.componentAttr?.inputBorder ?? false"
    :placeholder="componentMeta?.componentAttr?.placeholder ?? ''"
    :clearable="componentMeta?.componentAttr?.clearable ?? false"
    :trim="componentMeta?.componentAttr?.trim ?? false"
    :prefixIcon="componentMeta?.componentAttr?.prefixIcon"
    :suffixIcon="componentMeta?.componentAttr?.suffixIcon"
    :passwordIcon="
      componentMeta?.componentAttr?.passwordIcon ??
        inputComponentAttrType === 'password'
    "
    @input="onInput"
    @blur="onBlur"
  ></uni-easyinput>
</template>
<script setup>
import { computed, ref } from "vue";
const props = defineProps({
  componentMeta: {
    type: Object,
    default: () => ({}),
    required: true,
  },
  tableRowData: {
    type: Object,
    default: () => ({}),
  },
  rowIdx: {
    type: Number,
    default: 0,
  },
  tableColMetaList: {
    type: Array,
  },
});
const inputComponentAttrType = computed(() => {
  return props.componentMeta?.componentAttr?.type ?? "text";
});
const isEmitChange = ref(false);

const emits = defineEmits(["input", "blur", "change"]);
const onInput = (val) => {
  emits("input", val);
  isEmitChange.value = true;
};
const onBlur = (e) => {
  emits("blur", e);
  if (isEmitChange.value) {
    emits("change", props.tableRowData[props.componentMeta.key]);
  }
};
</script>
<style lang="scss"></style>
